<template>
	<view class="page-card-view">
		<view class="card-title">
			<view class="title">宣传活动</view>
			<view class="more-btn" @click="navToTopNewsList('宣传活动')">
				查看更多
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="tab-view">
			<v-tabs :bold="false" color="#383838" activeColor="#30B18D" lineHeight="1px" lineColor="#30B18D"
				activeFontSize="28rpx" fontSize="28rpx" :zIndex="0" v-model="publicityTabCurrent"
				:tabs="publicityTabTabs" field='name' @change="changepublicityTab">
			</v-tabs>
		</view>
		<view class="card-list-view">
			<view class="card-list-item" v-show="publicityTabCurrent==0||publicityTabCurrent==3"
				v-for="(item,index) in publicityList" @click="goDetails(item)" :key="index">
				<image class="card-list-image" :src="item.coverFileName"></image>
				<view class="right-view">
					<view class="title-and-date">
						<view class="title singe-line-ellipsis">{{item.titleName}}</view>
						<view class="date">{{item.createTime}}</view>
					</view>
				</view>
			</view>
			<view class="card-list-item" v-show="publicityTabCurrent==1||publicityTabCurrent==2" v-for="(item,index) in surveyList" @click="goSurvey(item)" :key="index">
				<image class="card-list-image" :src="item.image"></image>
				<view class="right-view">
					<view class="title-and-date">
						<view class="title singe-line-ellipsis">{{item.activityName}}</view>
						<view class="date">{{item.createTime.slice(0,10)}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as queryData from '../../common/api/index.js'
	export default {
		data() {
			return {
				publicityTabCurrent: 0,
				publicityTabTabs: [{
						name: '社区活动',
						uid: '74a80de681b34a849f7f8e301178380f'
					}, 
          {
						name: '论坛讲座',
						uid: '16074c1ec46a416ead14530335fcb79a'
					}, 
          {
						name: '问卷调查',
						uid: '1ae0e9b9450841a8b55b732b188f5896'
					},
					{
						name: '知识竞答',
						uid: '09058ff8432847d7b44bd98d03b40db4'
					}, 
					{
						name: '在线直播',
						uid: '0b0a342d55a74c70ac53854a028b7803'
					}, 
          {
						name: '卫生宣传日',
						uid: 'b0766882f8414649b32555f95073f5de'
					},
				],
				publicityList: [],
				surveyList: [],
			}
		},
		methods: {
      changepublicityTab(e) {
        this.publicityTabCurrent = e
        if(e==0){
          this.getPublicityList("社区活动")
        }else if(e==1){
          this.getPublicityList("论坛讲座")
        }	else if (e == 2) {
          this.getSurvey("问卷")
        } else if (e == 3) {
           this.getSurvey("竞答")
        } else if (e == 4) {
           this.getPublicityList("在线直播")
        } else if (e == 5) {
           this.getPublicityList("卫生宣传日")
        }   
      },
			getPublicityList(name) {
				// let item = this.publicityTabTabs[this.publicityTabCurrent]
				const param = {
					pageIndex: 1,
					pageSize: 4,
					positionsOne: '首页',
					// classifyUid: item.uid
          classify:name
				}
				queryData.queryByPage(param).then(res => {
          this.surveyList=[]
          // this.publicityList=[]
					this.publicityList = res.data.data.rows
				}).catch(error => {
					console.log(error)
				})
			},
			getSurvey(e) {
				const param = {
          pageIndex: 1,
          pageSize: 4,
          positionsOne: '首页',
					classify: e
				}
				queryData.querySurvey(param).then(res => {
          this.publicityList=[]
          // this.surveyList=[]
					this.surveyList = res.data.data.rows
				}).catch(error => {
					console.log(error)
				})
			},
			goDetails(data) {
				uni.navigateTo({
					url: "/pages/details/details?uid=" + data.uid
				})
			},
			goSurvey(data) {
				uni.navigateTo({
					url: "/pages/survey/survey?uid=" + data.uid
				})
			},
			navToTopNewsList(e) {
				uni.navigateTo({
					url: "/pages/publicity/publicity"
				})
			},
		},
		mounted() {
      this.getPublicityList("社区活动")
		}
	}
</script>

<style lang="scss" scoped>
	.page-card-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: white;

		.card-title {
			width: 100%;
			display: flex;
			padding: 30rpx;
			box-sizing: border-box;
			align-items: center;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #383838;
				flex: 1;
			}

			.more-btn {
				display: flex;
				font-size: 24rpx;
				color: #808080;
			}
		}
	}

	.card-list-view {
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.card-list-item {
			width: 100%;
			background: white;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
			margin-bottom: 20rpx;

			.card-list-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
			}

			.right-view {
				width: 500rpx;
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.title-and-date {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.title {
						width: 370rpx;
						font-size: 24rpx;
						color: #383838;
					}

					.date {
						width: 120rpx;
						font-size: 20rpx;
						color: #808080;
					}
				}

				.content-view {
					color: #A6A6A6;
					font-size: 18rpx;
				}
			}
		}
	}
</style>